<template>
  <!-- 固定设计稿尺寸的容器 -->
  <div class="dashboard-container">
    <div class="header">
      <div class="title">企业运营数据大屏</div>
      <div class="time">{{ currentTime }}</div>
    </div>

    <div class="kpi-row">
      <div v-for="(item, index) in kpiData" :key="index" class="kpi-card">
        <div class="kpi-title">{{ item.title }}</div>
        <div class="kpi-value" :style="{ color: item.color }">
          {{ item.value }}{{ item.unit }}
        </div>
        <div class="kpi-trend">
          <span
            :class="['icon', item.trend > 0 ? 'el-icon-top' : 'el-icon-bottom']"
          ></span>
        </div>
      </div>
    </div>

    <div class="chart-row">
      <div class="chart-card large">
        <div class="chart-title">年度销售额趋势</div>
        <Chart id="sales-chart" />
      </div>
      <div class="chart-card large">
        <div class="chart-title">产品销售额占比</div>
        <Chart id="product-chart" />
      </div>
    </div>

    <div class="chart-row">
      <div class="chart-card medium">
        <div class="chart-title">用户增长趋势</div>
        <Chart id="user-chart" />
      </div>
      <div class="chart-card medium">
        <div class="chart-title">产品质量评估</div>
        <Chart id="quality-chart" />
      </div>
      <div class="chart-card medium">
        <div class="chart-title">区域销售分布</div>
        <Chart id="map-chart" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Chart from '@/components/Chart.vue'
const containerRef = ref<any>()
const timer = ref<number>(0)
const currentTime = ref('')
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
  })
}

const kpiData = ref([
  { title: '总销售额', value: 1256, unit: '万', trend: 12.5, color: '#1890ff' },
  { title: '订单数量', value: 8846, unit: '单', trend: 8.2, color: '#13c2c2' },
  { title: '新增用户', value: 3245, unit: '人', trend: -3.1, color: '#52c41a' },
  { title: '客单价', value: 142, unit: '元', trend: 5.6, color: '#f5222d' },
])

const updateScale = () => {
  // 设计图尺寸
  const baseWidth = 1920
  const baseHeight = 1080
  if (!containerRef.value) return

  // 当前窗口尺寸
  const scaleX = window.innerWidth / baseWidth
  const scaleY = (window.innerHeight - 60) / baseHeight
  const scale = Math.min(scaleX, scaleY)

  containerRef.value.style.transform = `scale(${scale})`
  containerRef.value.style.transformOrigin = 'top left'

  const left = (window.innerWidth - baseWidth * scale) / 2
  const top = (window.innerHeight - 60 - baseHeight * scale) / 2
  containerRef.value.style.transform = `translate(${left}px, ${top}px) scale(${scale})`
}
onMounted(() => {
  containerRef.value = document.querySelector('.dashboard-container')
  updateScale()
  updateTime()
  timer.value = setInterval(updateTime, 1000)
  window.addEventListener('resize', updateScale)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateScale)
  clearInterval(timer.value as number)
})
</script>

<style lang="scss" scoped>
/* 固定设计稿尺寸 */
.dashboard-container {
  width: 1920px;
  height: 1080px;
  background: linear-gradient(to right, #0a1a2f 0%, #0c2b4a 50%, #0a1a2f 100%);
  padding: 20px 60px;
  box-sizing: border-box;

  /* 顶部标题 */
  .header {
    height: 80px;
    margin-bottom: 30px;
    text-align: center;

    .title {
      font-size: 42px;
      font-weight: bold;
      color: #00b4ff;
      text-shadow: 0 0 15px rgba(0, 180, 255, 0.5);
      margin-bottom: 10px;
    }

    .time {
      font-size: 20px;
      color: rgba(255, 255, 255, 0.7);
    }
  }

  /* KPI 指标行 */
  .kpi-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    height: 180px;

    .kpi-card {
      width: 420px;
      height: 100%;
      background: rgba(16, 42, 67, 0.6);
      border: 1px solid rgba(0, 180, 255, 0.3);
      border-radius: 8px;
      padding: 25px;
      box-sizing: border-box;
      text-align: center;

      .kpi-title {
        font-size: 24px;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 20px;
      }

      .kpi-value {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 15px;
      }

      .kpi-trend {
        font-size: 20px;

        .icon {
          margin-right: 8px;
          font-size: 24px;
        }

        .el-icon-top {
          color: #f5222d;
        }
        .el-icon-bottom {
          color: #52c41a;
        }
      }
    }
  }

  /* 图表行通用样式 */
  .chart-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;

    /* 大图表（两个并排） */
    .chart-card.large {
      height: 290px;
      width: 880px;
    }

    /* 中图表（三个并排） */
    .chart-card.medium {
      width: 580px;
      height: 340px;
    }

    .chart-card {
      background: rgba(16, 42, 67, 0.6);
      border: 1px solid rgba(0, 180, 255, 0.3);
      border-radius: 8px;
      padding: 20px;
      box-sizing: border-box;

      .chart-title {
        font-size: 24px;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 15px;
        padding-left: 10px;
      }

      /* 图表容器 */
      #sales-chart,
      #product-chart,
      #user-chart,
      #quality-chart,
      #map-chart {
        width: 100%;
        height: calc(100% - 40px);
      }

      /* 地图特殊高度 */
      #map-chart {
        height: calc(100% - 40px);
      }
    }
  }
}
</style>
